<template>
  <div class="bg">
    <!-- 时间搜索框 -->
    <searchTime
      @searchvalue="userSearch"
      @searchreset="reset"
      :selectMsg='selectMsg'
      :options="options"
      :titMsg="placeholder"
      :selectBoolen="true"
      :selectTime="true"
    />

    <!-- 表格展示 -->
    <el-card class="card">
      <!-- 表格展示 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @cell-dblclick="tabClick"
        :highlight-current-row="true"
       
      >
        <el-table-column prop="index" label="序号" width="100" align="center"></el-table-column>
        <el-table-column prop="userName" label="用户昵称" align="center"></el-table-column>
        <el-table-column prop="petName" label="宠物昵称" align="center"></el-table-column>
        <el-table-column prop="userPhone" label="手机号码" align="center" width="150"></el-table-column>
        <el-table-column prop="postContent" label="动态内容" width="300" align="center"></el-table-column>
        <el-table-column label="回复" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.postId === tabClickIndex ">
              <el-input
                size="small"
                v-model="scope.row.postCommentNumber"
                @change="chanageback"
                maxlength="5"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              ></el-input>
            </span>
            <span v-else>{{scope.row.postCommentNumber}}</span>
          </template>
        </el-table-column>
        <el-table-column label="点赞" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.postId === tabClickIndex ">
              <el-input
                size="small"
                v-model="scope.row.postLikeNumber"
                @change="chanageNum"
                maxlength="5"

                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              ></el-input>
            </span>
            <span v-else>{{scope.row.postLikeNumber}}</span>
          </template>
        </el-table-column>
        <el-table-column label="转发" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.postId === tabClickIndex ">
              <el-input
                size="small"
                v-model="scope.row.postForwardNumber"
                @change="chanageopen"
                maxlength="5"

                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              ></el-input>
            </span>
            <span v-else>{{scope.row.postForwardNumber}}</span>
          </template>
        </el-table-column>
        <el-table-column label="收藏" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.postId === tabClickIndex ">
              <el-input
                size="small"
                maxlength="5"

                v-model="scope.row.postCollectionNumber"
                @change="chanagecollect"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
              ></el-input>
            </span>
            <span v-else>{{scope.row.postCollectionNumber}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="postCreateTime" label="时间" width="180" align="center"></el-table-column>
        <el-table-column prop="postStatus" label="状态"  align="center">
           <template slot-scope="scope">
          <div>{{scope.row.postStatus==1?"正常":"已屏蔽"}}</div>
           </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="280" align="center">
          <template slot-scope="scope">
            <el-button @click="lookuserstatus(scope.row)" type="primary" size="small">查看</el-button>
            <el-button
              v-if="scope.row.postId === tabClickIndex "
              @click="compilesave(scope.row)"
              type="success"
              size="small"
            >保存</el-button>
            <el-button v-else @click="compile(scope.row)" type="success" size="small">编辑</el-button>
            <el-button
              @click="shield(scope.row)"
              type="warning"
              size="small"
            >{{scope.row.postStatus==1?'屏蔽':'解除'}}</el-button>
            <!-- <el-button @click="delet(scope.row)" type="danger" size="small">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top:20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
          background
        :page-size="10"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>

    <!-- 弹窗 -->
    <el-dialog title :visible.sync="dialogVisible" width="30%" >
      <usermsg
        :userMessage="lookusermsg"
        :comment="usermsglist"
        :commentTotal="userTotal"
        @currentpage="currentpage"
        @commentshield="userUpdate"
      />
    </el-dialog>
  </div>
</template>

<script>
import { export2Excel } from "@/components/commom.js";
import searchTime from "@/components/searchTime";
import usermsg from "@/components/usermsg";
export default {
  components: {
    searchTime,
    usermsg
  },
  data() {
    return {
      // 单元格输入框
      tabClickIndex: null, // 点击的单元格
      tabClickLabel: "", // 当前点击的列名
      placeholder: "用户昵称/电话号码", //输入框提示信息
      selectMsg: "状态", //输入框提示信息
      dialogVisible: false, //弹窗
      options: [
        {
          value: 1,
          label: "正常"
        },
        {
          value: 2,
          label: "已屏蔽"
        }
      ],
      value: "",
      value1: "",
      downloadLoading: false,
      tableData: [], //列表数据
      lookusermsg: {}, //用户详情数据
      usermsglist: [], //查看用户详情列表
      userTotal: 100, //查看用户总条数
      lookcurrent: 1, //查看用户总条数
      postId: 0, //查看用户详情ID
      total: 0, //列表数据
      current: 1, //列表数据
      // 模糊状态查询
      status: "",
      selectCode: "",
      startDate: "",
      endDate: "",
      // 修改的用户信息
      postLikeNumber: 0, //点赞数量
      postCommentNumber: 0, //回复数量
      postCollectionNumber: 0, //收藏数量
      postForwardNumber: 0 //转发数量
    };
  },
  mounted() {
    this.userstatus();
    // 获取收藏的数量
    // let userNum = sessionStorage.getItem("userNumber");
    // if (userNum == "" || userNum == null) {
    //   return;
    // } else {
    //   let userNumlMsg = JSON.parse(userNum);
    //   this.postLikeNumber = userNumlMsg.postLikeNumber; //点赞数量
    //   this.postCommentNumber = userNumlMsg.postCommentNumber; //回复数量
    //   this.postCollectionNumber = userNumlMsg.postCollectionNumber; //收藏数量
    //   this.postForwardNumber = userNumlMsg.postForwardNumber; //转发数量
    //   console.log("重新获取收藏的数据", userNumlMsg);
    // }
  },
  methods: {
    // 获取用户动态列表
    userstatus() {
      let param = {
        size: 10,
        current: this.current,
        status: this.status, //状态查询
        selectCode: this.selectCode, //模糊查询
        startDate: this.startDate, //开始时间
        endDate: this.endDate //结束时间
      };
      this.$http.article.userstatuslist(param).then(res => {
        this.tableData = res.result.records;
        this.total = res.result.total;
        console.log("获取用户动态的列表", res);
        //显示每页展示的数量
        res.result.records.forEach((item, index) => {
          //res.data.data.list 表格数据     forEach为每一项添加数据
          item.index = index + 1 + (this.current - 1) * 10;
          // this.currentPage当前页  this.pageParams.size 每页显示多少    :page-sizes="[10,20,30,50]" 分页大小

          return item;
        });
      });
    },
    // 删除页面
    // delet(val) {
    //   console.log("val", val);
    //   this.$confirm("是否确认删除？", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(() => {
    //       this.$http.article
    //         .userstatusdelet({ petPostId: val.postId })
    //         .then(res => {
    //           if (res.code == 200) this.userstatus();

    //           /*--------删除成功之后获取上一页的数据,避免是否为空--------*/

    //           //此时已经实现删除操作，所以total的值需要减size，Math.ceil是向上取整，保证始终大于等于0
    //           const totalPage = Math.ceil((this.total - 1) / 10);

    //           console.log("totalPage", totalPage);

    //           //将当前页码与删除数据之后的总页数进行比较，避免当前页码不存在
    //           const pagenum =
    //             this.current > totalPage ? totalPage : this.current;

    //           console.log("获取总条数", pagenum);

    //           //避免pagenum变为0
    //           this.current = pagenum < 1 ? 1 : pagenum;
    //           // 提示弹窗
    //           this.$message.success("删除成功!");
    //         });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除"
    //       });
    //     });
    // },
    //用户编辑信息
    compile(val) {
      console.log("用户编辑信息", val);
      this.tabClickIndex = val.postId;
      this.$http.article.userGet({ petPost: val.postId }).then(res => {
        this.postLikeNumber = res.result.postLikeNumber; //点赞数量
        this.postCommentNumber = res.result.postCommentNumber; //回复数量
        this.postCollectionNumber = res.result.postCollectionNumber; //收藏数量
        this.postForwardNumber = res.result.postForwardNumber; //转发数量
        console.log("获取用户动态详情", res);
      });
    },
    // 保存用户修改的信息
    compilesave(val) {
      let param = {
        postId: val.postId,
        postLikeNumber: this.postLikeNumber, //点赞数量
        postCollectionNumber: this.postCollectionNumber, //点赞数量
        postCommentNumber: this.postCommentNumber, //回复数量
        postForwardNumber: this.postForwardNumber //转发数量
      };
      // 保存回复点赞转发收藏数量
      // sessionStorage.setItem("userNumber", JSON.stringify(param));
      this.$http.article.userUpdate(param).then(res => {
        if (res.code == 200) this.userstatus();

        // console.log(param)

        this.$message.success(res.msg);
        this.tabClickIndex = null;
      });
    },
    // 用户屏蔽信息
    shield(val) {
      console.log("用户屏蔽方法", val);
      let userhintMsg = "";
      if (val.postStatus == 1) {
        userhintMsg = "确定禁用";
      } else {
        userhintMsg = "确定启用";
      }
      this.$confirm(`此操作将${userhintMsg}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let userStatus = 0;
          if (val.postStatus == 1) {
            userStatus = 2;
          } else {
            userStatus = 1;
          }
          let param = {
            postId: val.postId,
            postStatus: userStatus
          };
          this.$http.article.userUpdate(param).then(res => {
            this.$message.success(res.msg);
            if (res.code == 200) this.userstatus();
            console.log("禁用或者启用", res);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 查看
    lookuserstatus(val) {
      this.dialogVisible = true;
      this.lookusermsglist(val.postId);
      this.postId = val.postId;
      this.$http.article.userstatusget({ petPost: val.postId }).then(res => {
        this.lookusermsg = res.result;

        console.log("获取用户信息", res);
      });
    },
    //  查看用户详情列表
    lookusermsglist(postId) {
      let param = {
        size: 10,
        current: this.lookcurrent,
        postId: postId
      };
      this.$http.article.usermsgGet(param).then(res => {
        this.usermsglist = res.result.records;
        this.userTotal = res.result.total;
        console.log("查看用户获取详情列表", res);
      });
    },
    // 查看用户详情分页
    currentpage(val) {
      console.log(val);
      this.lookcurrent = val;
      this.lookusermsglist(this.postId);
    },
    // 修改用户列表
    userUpdate(val) {
      let userhintMsg = "";
      if (val.commentStatus == 1) {
        userhintMsg = "确定屏蔽话题";
      } else {
        userhintMsg = "确定解除屏蔽";
      }
      this.$confirm(`此操作将${userhintMsg}文件, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let userStatus = 0;
          if (val.commentStatus == 1) {
            userStatus = 2;
          } else {
            userStatus = 1;
          }
          let param = {
            commentId: val.commentId,
            commentStatus: userStatus
          };
          this.$http.article.usermsgUpdate(param).then(res => {
            this.$message.success(res.msg);
            if (res.code == 200) this.lookusermsglist(this.postId);
            console.log("禁用或者启用", res);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.current = val;
      this.userstatus();
    },
    //条数
    handleSizeChange(val) {
      console.log("val条数", val);
    },
    // 回复
    chanageback(val) {
      this.postCommentNumber = val;
      console.log("回复信息", val);
    },
    // 点赞
    chanageNum(val) {
      this.postLikeNumber = val;
      console.log("点赞", val);
    },
    // 收藏
    chanagecollect(val) {
      this.postCollectionNumber = val;
      console.log("收藏", val);
    },
    // 点赞
    // chanageNum(val) {
    //   this.postLikeNumber = val;
    //   console.log("点赞", val);
    // },
    // 转发
    chanageopen(val) {
      this.postForwardNumber = val;
      console.log("转发", val);
    },
    // 搜索框
    userSearch(val) {
       this.current=1;//模糊查询
      this.status = val.value; //状态查询
      this.selectCode = val.search; //模糊查询
      this.startDate = val.firstTime; //开始时间
      this.endDate = val.endTime; //结束时间
      this.userstatus();
      console.log("搜索框", val);
    },
    // 重置
    reset(val) {
      this.status = ""; //状态查询
      this.selectCode = ""; //模糊查询
      this.startDate = ""; //开始时间
      this.endDate = ""; //结束时间
      if (val == "reseta") this.userstatus();
    },
    // 测试单元格变价
    tabClick(row, column, cell, event) {
      console.log("测试数据", row);
      switch (column.label) {
        case "回复":
          this.tabClickIndex = row.postId;
          this.tabClickLabel = column.label;
          break;
        case "点赞":
          this.tabClickIndex = row.postId;
          this.tabClickLabel = column.label;
          break;
        case "转发":
          this.tabClickIndex = row.postId;
          this.tabClickLabel = column.label;
          break;
        default:
          return;
      }
    },
    // 测试input
    testinput() {
      this.tabClickIndex = null;
      this.tabClickLabel = "";
    },

    // 确认弹窗是否关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // table标签失去焦点
    loseFcous(van, val) {
      console.log("van", van);
      console.log("val", val);
    }
  }
};
</script>

<style lang="scss" scoped>
.grid-content {
  width: 100%;
  height: 20px;
  background-color: red;
}
.merchantData {
  display: flex;
  align-items: center;
  padding-top: 14px;
  .addmerchant {
    color: #409eff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
  .merchantNum {
    color: #f23a3a;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 800;
  }
}

.clearfix {
  padding-bottom: 20px;
}
.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  padding-top: 10px;
}

.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>